
/* for design , define this below */

.light {background: #90FFFF; -moz-opacity:.50; filter:alpha(opacity=50); opacity:.50;}
.diag {background: #CAFFCA}
.appfield { zoom: 1 }
.appfield table td { border-color: black; }

.appfield table td.horiz { border-top-color: #50FF50; border-bottom-color:#50FF50; }
.appfield table td.vert  { border-left-color:#FF50FF; border-right-color:#FF50FF; }
.appfield table td.debug { background: #FFFF80 }
/* END design */


.appfield table {
  margin:auto;
  border-collapse: separate;
  border-spacing:0;
  margin-top:1em;
}

.appfield table td {
  width:2em;
  height:2em;
  border-width: 1px;
  border-style: solid;
  margin:0px;
  padding:0px;
  font-size:larger;
  text-align:center;
  cursor: hand;
  cursor: pointer;
}

.appfield table.asking td {
  cursor: wait;
}

.appfield table td.tbold { border-top-width:3px  }
.appfield table td.lbold { border-left-width:3px  }
.appfield table td.bbold { border-bottom-width:3px  }
.appfield table td.rbold { border-right-width:3px  }
/*.appfield table td.horiz { border-top-width: 2px;border-bottom-width:2px; }
.appfield table td.vert  { border-left-width: 2px;border-right-width:2px;}*/
.appfield table td.vert.horiz { 
  -moz-border-radius:       0.85em; /* Firefox */
  -webkit-border-radius:    0.85em; /* Safari, Chrome */
  -khtml-border-radius:     0.85em; /* KHTML */
  border-radius:            0.85em; /* CSS3 */
  -moz-opacity:.85; filter:alpha(opacity=85); opacity:.85; }
.appfield table td span {position:absolute; margin:auto; top:0;}

.node {
 /*margin-top: 80px;for toolbar */
  padding-top: 1em;/* for humans */
  
}

.bold { font-weight: bolder; }
.appfield { display:none; text-align:center; }
/* background:white; */
.toolbar { 
  margin:auto; 
  width:100%; 
  text-align:center;
  padding:0.5em;
  background:infobackground;
  color: black;
/*  position: absolute;
  top: 0px;*/
  z-index: -10;
}











.show-50 { -moz-opacity:.50; filter:alpha(opacity=50); opacity:.50; }
.show-100 { -moz-opacity:1; filter:alpha(opacity=100); opacity:1; }
.glassy {
/* CSS3
  background: lineir-gradient*/
} 


















.toolbar button {
  margin-left: 0.1em;
  padding-top: 0.4em;
  z-index: -10;
}

#export-import { text-align:justify; font-size:150%;}
#step-button {font-weight:bolder;}
#solve-button {font-weight:bolder; color:red;}



.cypher {
  padding:2px;
  border:1px solid gray;
  -moz-border-radius:       10px; /* Firefox */
  -webkit-border-radius:    10px; /* Safari, Chrome */
  -khtml-border-radius:     10px; /* KHTML */
  border-radius:            10px; /* CSS3 */
  overflow:hidden;
  width: auto;
  float:left;
/* wow, firefox 3.0.5 and opera 9.26 ignores this for buttons and inputs????!!! */
  z-index: 1000;
  /*background: gray ;
  -moz-opacity:.50; filter:alpha(opacity=50); opacity:.50;*/
  background: linear-gradient( -90deg, rgba( 255, 255, 255, 0.5 ), rgba( 255, 255, 255, 0.25 ) );
  background: -webkit-gradient( linear, left top, left bottom, from(rgba( 255, 255, 255, 0.5 )), to(rgba( 255, 255, 255, 0.25 )) );
  background: -moz-linear-gradient(-90deg, rgba( 255, 255, 255, 0.5 ), rgba( 255, 255, 255, 0.25 ));
  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#7fffffff', endColorstr='#40ffffff');
}

.cypher input {
  float:left;
  z-index: 1000;
  -moz-border-radius:       0.7em; /* Firefox */
  -webkit-border-radius:    0.7em; /* Safari, Chrome */
  -khtml-border-radius:     0.7em; /* KHTML */
  border-radius:            0.7em; /* CSS3 */
  background: linear-gradient( -90deg, rgba( 255, 255, 255, 0.25 ), rgba( 255, 255, 255, 0.75 ) );
  background: -webkit-gradient( linear, left top, left bottom, from(rgba( 255, 255, 255, 0.25 )), to(rgba( 255, 255, 255, 0.75 )) );
  background: -moz-linear-gradient(-90deg, rgba( 255, 255, 255, 0.25 ), rgba( 255, 255, 255, 0.75 ));
  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#40ffffff', endColorstr='#7fffffff');
  
  font-size: 125%;
  border-width: 1px;
}

* html .cypher input {
  padding-left: 0.5em;
  padding-right: 0.5em;
}

.cypher input.fit {
  width: auto;
  padding-left: 1em;
  padding-right: 1em;
  
}
.clear-right { clear: both; }